<!DOCTYPE html>
<html dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
    <title>steam商城</title>
    <!-- Custom CSS -->
    <link href="../dist/css/style.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
    <div class="main-wrapper">
        <!-- ============================================================== -->
        <!-- Preloader - style you can find in spinners.css -->
        <!-- ============================================================== -->
        <div class="preloader">
            <div class="lds-ripple">
                <div class="lds-pos"></div>
                <div class="lds-pos"></div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- Preloader - style you can find in spinners.css -->
        <!-- ============================================================== -->
        <div class="container pt-4 pb-4">
            <a class="navbar-brand" href="index.html">
                <!-- Logo text -->
                <span class="logo-text">
                    <!-- dark Logo text -->
                    <img src="../assets/images/logos/logo-text.png" alt="homepage" class="dark-logo" />
                </span>
            </a>
        </div>
        <!-- ============================================================== -->
        <!-- Login box.scss -->
        <!-- ============================================================== -->
        <div class="auth-wrapper d-flex no-block justify-content-center align-items-center"
            style="background:url(../assets/images/big/auth-bg.jpg) no-repeat center center;">
            <div class="auth-box">
                <div id="loginform">
                    <div class="logo d-flex justify-content-between">
                        <h3 class="font-medium">用户登录</h3>
                        <div>没有账号？<a href="register.html" class="text-danger">注册</a></div>
                    </div>
                    <!-- Form -->
                    <div class="row">
                        <div class="col-12">
                            <form class="form-horizontal needs-validation mt-3" id="loginform" action="" novalidate>
                                <div class="form-group">
                                    <label for="username">账号</label>
                                    <input type="username" class="form-control form-control-lg" id="username"
                                        placeholder="请输入用户名/手机号" required>
                                </div>
                                <div class="form-group">
                                    <label for="password">密码</label>
                                    <div class="input-group mb-3">
                                        <input type="password"
                                            class="form-control form-control-lg form-control-password"
                                            placeholder="请输入密码" required>
                                        <div class="input-group-append">
                                            <button class="btn btn-secondary js-password-control" type="button">
                                                <i class="fas fa-eye-slash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="password">验证码</label>
                                    <div class="input-group mb-3">
                                        <input type="password" class="form-control form-control-lg"
                                            placeholder="请输入验证码" required>
                                        <div class="input-group-append pl-2">
                                            <a href="javascript:;"><img src="../assets/images/demo/img-19.png"
                                                    width="100%" alt=""></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck1">
                                            <label class="custom-control-label" for="customCheck1" required>保存登录信息</label>
                                            <a href="javascript:void(0)" id="to-recover"
                                                class="text-dark float-right"><i class="fa fa-lock mr-1"></i> 忘记密码?</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group text-center mb-0">
                                    <div class="col-xs-12">
                                        <button class="btn btn-block btn-lg btn-danger" type="submit">登录</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div id="recoverform">
                    <div class="logo">
                        <h3 class="font-medium mb-3">密码重置</h3>
                    </div>
                    <div class="row mt-3">
                        <!-- Form -->
                        <form class="col-12" action="login.html">
                            <div class="form-group">
                                <label for="username">手机号</label>
                                <input type="username" class="form-control form-control-lg" id="username"
                                    placeholder="请输入手机号">
                            </div>
                            <div class="form-group">
                                <label for="password">验证码</label>
                                <div class="input-group mb-3">
                                    <input type="password" class="form-control form-control-lg" placeholder="请输入验证码">
                                    <div class="input-group-append pl-2">
                                        <a href="javascript:;"><img src="../assets/images/demo/img-19.png" width="100%"
                                                alt=""></a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password">动态验证码</label>
                                <div class="input-group mb-3">
                                    <input type="password" class="form-control form-control-lg" placeholder="请输入动态验证码">
                                    <div class="input-group-append">
                                        <button class="btn btn-secondary" type="button">
                                            获取验证码
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password">新密码</label>
                                <div class="input-group mb-3">
                                    <input type="password" class="form-control form-control-lg form-control-password"
                                        placeholder="请输入新密码">
                                    <div class="input-group-append">
                                        <button class="btn btn-secondary js-password-control" type="button">
                                            <i class="fas fa-eye-slash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- pwd -->
                            <div class="row mt-3">
                                <div class="col-12">
                                    <button class="btn btn-block btn-lg btn-danger" type="submit"
                                        name="action">确认提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- Login box.scss -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
        <footer class="footer">
            <div class="footer-links">
                <div class="container pt-4 pb-4 d-flex justify-content-between">
                    <div>
                        <h3>关于</h3>
                        <ul>
                            <li><a href="./document.html#aboutus">关于平台</a></li>
                            <li><a href="./document.html#termsOfService">服务条款</a></li>
                            <li><a href="./document.html#member">会员</a></li>
                            <li><a href="./document.html#orderPay">订单支付</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>支付方式</h3>
                        <ul>
                            <li><a href="./document.html#alipay">支付宝</a></li>
                            <li><a href="./document.html#wechat">微信</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>售后服务</h3>
                        <ul>
                            <li><a href="./document.html#RefundPolicy">退款政策</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>虚拟发货</h3>
                        <ul>
                            <li><a href="./document.html#CDKreceive">CDkey领取</a></li>
                            <li><a href="./document.html#steamPurchasing">Steam代购</a></li>
                            <li><a href="./document.html#Anonymous">匿名领取</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>客服中心</h3>
                        <ul>
                            <li>客服在线时间：09:00 - 21:00</li>
                            <li>客服QQ：1812945859</li>
                            <li>客服邮箱：123@123.COM</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-copyright text-center">Copyright since 2004 All Rights Reserved 版权所有 侵权必究
                <a href="javascript:;">皖ICP备B2-20100023-11</a>.</div>

        </footer>
        <!-- ============================================================== -->
        <!-- End footer -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- All Required js -->
    <!-- ============================================================== -->
    <script src="../assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="../assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- ============================================================== -->
    <!-- This page plugin js -->
    <!-- ============================================================== -->
    <script>
        $(document).ready(function () {
            var flag = 1;
            $(".js-password-control").click(function (event) {
                if (flag === 1) {
                    $(".form-control-password").attr("type", "text");
                    $(this).find('i').addClass('fa-eye').removeClass('fa-eye-slash')
                    flag = 0;
                } else {
                    $(".form-control-password").attr("type", "password");
                    $(this).find('i').addClass('fa-eye-slash').removeClass('fa-eye')
                    flag = 1;
                }
            });

            window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
        });

        $('[data-toggle="tooltip"]').tooltip();
        $(".preloader").fadeOut();
        // ============================================================== 
        // Login and Recover Password 
        // ============================================================== 
        $('#to-recover').on("click", function () {
            $("#loginform").slideUp();
            $("#recoverform").slideDown();
        });
    </script>
</body>

</html>